<script setup>
import {
  removePolylineEventHander,
  removePolygonEventHander,
  removeTriangleEventHander,
  clearMeasureAll,
} from '@/cesium/measure'

import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import useMapStore from '@/stores/modules/map'

const router= useRouter()

const mapStore = useMapStore()
const { viewer, isShowMeasure, isMeasure, } = storeToRefs(mapStore)

const activeIndex = ref('1')
const handleSelect = (key) => {
  //console.log('111',key);
  if(key==='single'){
    router.push('/haplochromatization')
    return 
  }
  if(key==='1-1'){
    router.push('/roam')
    return 
  }
  if(key==='one'){
    router.push('/buffer')
    return 
  }
  if(key==='3-2'){
    router.push('/settlement')
    return 
  }
  // 控制测量面板是否显示
  if (key === '2-1') {
    isShowMeasure.value = true
  } else {
    isShowMeasure.value = false
    clearMeasureAll(viewer.value)

    if (isMeasure.value.distance) {
      isMeasure.value.distance = false
      removePolylineEventHander()
    }
    if (isMeasure.value.area) {
      isMeasure.value.area = false
      removePolygonEventHander()
    }
    if (isMeasure.value.triangle) {
      isMeasure.value.triangle = false
      removeTriangleEventHander()
    }
  }
  
}

</script>

<template>
  <div class="nav-bar">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo head-menu"
      mode="horizontal"
      :ellipsis="false"
      background-color="#000"
      active-color="#545c64"
      text-color="#fff"
      @select="handleSelect"
    >
    <el-sub-menu index="1">
        <template #title>基本功能</template>
        <el-menu-item index="1-1">键盘漫游</el-menu-item>
        <el-menu-item index="1-2">首页</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>空间测量功能</template>
        <el-menu-item index="2-1">空间测量</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>空间分析功能</template>
        <el-menu-item index="one">缓冲分析</el-menu-item>
        <el-menu-item index="3-2">沉降分析</el-menu-item>
        <el-menu-item index="single">单体化</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style lang="less" scoped>
.nav-bar {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;

  .head-menu {
    height: 100%;
    background-color: #000;
    border-bottom: none;

    :deep(.el-menu-item) {
      background-color: rgba(0, 0, 0, 0.1);
    
      &.is-active {
        color: #ff9854;
      }
    }
  }
}
</style>
